<template>
  <div class="bg">
    <div class="login-panel">
      <div class="logo-info">
        <span>用户登录</span>
      </div>
      <el-form
        ref="editForm"
        :model="editForm"
        label-width="0px"
        :rules="rules"
      >
        <el-form-item prop="account" size="small">
          <el-input
            v-model="editForm.account"
            placeholder="请输入账号(账号或手机号)"
            prefix-icon="el-icon-user"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password" size="small">
          <el-input
            type="password"
            v-model="editForm.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="checkCode" size="small">
          <el-input
            v-model="editForm.checkCode"
            placeholder="请输入验证码"
            prefix-icon="iconfont icon-safe"
            :style="{ width: '160px' }"
          >
            <el-icon slot="prefix" type="safety-certificate" />
          </el-input>
          <img :src="checkCodeUrl" class="check-code" @click="changeCode" />
        </el-form-item>
        <el-form-item size="small" class="remember-me">
          <el-checkbox v-model="editForm.rememberMe" :label="true"
            >记住我</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm"
            :style="{ width: '100%' }"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import md5 from 'js-md5'
export default {
  data() {
    return {
      editForm: {},
      rules: {
        account: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
        checkCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur',
          },
        ],
      },
      checkCodeUrl: 'api/checkCode',
    }
  },
  methods: {
    submitForm() {
      let params = {}
      Object.assign(params, this.editForm)

      let password = params.password
      let cookePassword = this.$cookies.get('password')
      if (password !== cookePassword) {
        params.password = md5(password)
      }

      this.$refs['editForm'].validate(async (valid) => {
        if (valid) {
          let result = await this.Request({
            url: '/login',
            params: params,
            errorCallback: () => {
              this.changeCode()
            },
          })
          sessionStorage.clear()
          sessionStorage.setItem('userInfo', JSON.stringify(result))
          if (params.rememberMe) {
            this.$cookies.set('account', params.account)
            this.$cookies.set('password', params.password)
            this.$cookies.set('rememberMe', params.rememberMe)
          }
          let menuList = result.menuList
          if (menuList == undefined || menuList.length == 0) {
            this.$router.push('pageNoPermission')
            return
          }
          // this.$message.success('登录成功，跳转中......')

          let firstChildren =
            menuList[0].children != undefined && menuList[0].children.length > 0
              ? menuList[0].children[0].menuUrl
              : menuList[0].menuUrl

          this.$message({
            message: '登录成功，跳转中.....',
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.$router.push(firstChildren)
            },
          })
        }
      })
    },
    changeCode() {
      this.checkCodeUrl = 'api/checkCode?' + new Date().getTime()
    },
  },
  created() {
    document.onkeydown = () => {
      var key = window.event.keyCode
      if (key == 13) {
        this.submitForm()
      }
    }
    this.changeCode()
    /*** 保存一周 */
    this.$cookies.config(7 * 24 * 60 * 60)

    this.editForm = {
      account: this.$cookies.get('account'),
      password: this.$cookies.get('password'),
      rememberMe: Boolean(this.$cookies.get('rememberMe')),
    }
  },
}
</script>
<style lang="less">
.bg {
  box-sizing: border-box;
  height: calc(100vh);
  background-image: url(https://s3.ax1x.com/2021/02/26/yzW95n.jpg) !important;
  padding-top: 10%;
}
.login-panel {
  padding: 20px;
  float: right;
  margin-right: 100px;
  width: 350px;
  background: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  box-shadow: 2px 2px 10px #888888;
  border-radius: 5px;

  .logo-info {
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
  }

  .check-code {
    float: right;
    margin-top: 1px;
    cursor: pointer;
  }

  .remember-me {
    margin-bottom: 15px;
    .el-form-item__content {
      line-height: 20px !important;
    }
  }

  .el-input--small .el-input__inner {
    height: 38px !important;
    line-height: 32px !important;
  }
}
/* .ant-form-item {
  margin-bottom: 20px !important;
}
.ant-form-item-control {
  line-height: 30px !important;
}
.ant-form-item-with-help {
  margin-bottom: 2px !important;
}
.ant-form-item-label {
  line-height: 32px !important;
} */
</style>
